<template>
<view>
<view class="container">
	<uni-nav-bar title="琅琊严选" fixed="true"  color="#fff" backgroundColor="#353535"></uni-nav-bar>
  <view class="profile">
    <image class="profile-img" src="/static/static/images/background.png" mode="aspectFill"></image>
    <view class="profile-content">
      <view class="profile-info"  @tap="onUserInfoClick">
        <image  class="avatar" :src="userInfo.avatar"></image>
        <view class="info">
          <text class="name" >{{ userInfo.nickname || '点击登录' }}</text>
          <!-- <text class='level' bindtap='onUserInfoClick'></text> -->
        </view>
        <!-- <image bindtap="onUserInfoClick" class='btn' src='/static/images/whitearrow.png'></image> -->
      </view>

      <view class="profile-bottom">
        <view class="item">
          <navigator url="/pages/ucenter/collect/collect" hover-class="none">
            <text class="top-text">{{collectNum}}</text>
            <text class="bottom-text">收藏</text>
          </navigator>
        </view>
        <view class="item">
          <navigator url="/pages/ucenter/footprint/footprint" hover-class="none">
            <text class="top-text">{{footNum}}</text>
            <text class="bottom-text">足迹</text> 
          </navigator>
        </view>
        <view class="item">
          <navigator url="/pages/ucenter/coupon/coupon" hover-class="none">
            <text class="top-text">{{couponNum}}</text>
            <text class="bottom-text">卡券</text> 
          </navigator>
        </view>
      </view>
    </view>
    <!-- <image class="vip-img" src="/static/images/vipcenter.png" mode="aspectFill"></image> -->
  </view>

  <view class="order">
    <view class="title">
      <text class="l">我的订单</text>
      <navigator url="/pages/ucenter/order/order?status=-1" hover-class="none">
        <text class="r">全部订单</text>
        <image class="jiantou" src="/static/static/images/jiantou-you.png"></image>
      </navigator>
    </view>
    <view class="menu">
      <view class="item">
        <navigator url="/pages/ucenter/order/order?status=0" hover-class="none">
          <image src="/static/static/images/buying.png" background-size="cover"></image>
          <text class="bottom-text">待付款</text> 
        </navigator>
      </view>
      <view class="item">
        <navigator url="/pages/ucenter/order/order?status=1"  hover-class="none">
          <image src="/static/static/images/sending.png" background-size="cover" ></image>
          <text class="bottom-text">待发货</text> 
        </navigator>
      </view>
      <view class="item">
        <navigator url="/pages/ucenter/order/order?status=2" hover-class="none">
          <image src="/static/static/images/taking.png" background-size="cover"></image>
          <text class="bottom-text">待收货</text> 
        </navigator>
      </view>
      <view class="item">
        <navigator url="/pages/ucenter/order/order?status=3" hover-class="none">
          <image src="/static/static/images/buyed.png" style="height:50rpx;width:50rpx;" background-size="cover" ></image>
          <text class="bottom-text">完成</text> 
        </navigator>
      </view>
    </view>
  </view>

  <view class="user-menu">
    <view class="item">
      <navigator url="/pages/shopping/address/address" class="a" hover-class="none">
        <view class="icon"><image style="width:32rpx;height: 41rpx" src="/static/static/images/address.png"></image></view>
        <text class="txt">收货地址</text>
        <image class="jiantou" src="/static/static/images/jiantou-you.png"></image>
      </navigator>
    </view>
    <view class="item">
      <navigator url="/pages/ucenter/feedback/feedback" class="a" hover-class="none">
        <view class="icon"><image style="width:40rpx;height: 35rpx" src="/static/static/images/advice.png"></image></view>
        <text class="txt">意见反馈</text>
        <image class="jiantou" src="/static/static/images/jiantou-you.png"></image>
      </navigator>
    </view>
    <view class="item item-bottom">
      <navigator url="/pages/ucenter/introduce/introduce" class="a" hover-class="none">
        <view class="icon"><image style="width:41rpx;height:40rpx" src="/static/static/images/aboutus.png"></image></view>
        <text class="txt">关于我们</text>
        <image class="jiantou" src="/static/static/images/jiantou-you.png"></image>
      </navigator>
    </view>
  </view>

  <image class="bottom-img" src="/static/static/images/picture.png"></image>
  <view class="logout" @tap="exitLogin">退出登录</view>
</view>
<login :show="showLoginDialog" @success="onLigonSuccess"> </login>

</view>
</template>

<script>
const util = require("../../../utils/util.js");
const api = require("../../../config/api.js");
const user = require("../../../services/user.js");
const app = getApp();
import login from "../../component/login/login";
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

export default {
  data() {
    return {
      userInfo: {},
      showLoginDialog: false,
      couponNum: '0',
      footNum: '0',
      collectNum: '0'
    };
  },

  components: {
    login,
	uniNavBar
  },
  props: {},
  onShareAppMessage: function (res) {
    return {
      title: '琅琊严选',
      path: '/pages/index/index'
    };
  },
  onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {},
  onShow: function () {
	  
    this.setData({
      userInfo: uni.getStorageSync('userInfo'),
	  couponNum: 0,
	  footNum: 0,
	  collectNum: 0
    });
    this.getUserInfo();
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  onPullDownRefresh: function () {
    uni.showNavigationBarLoading(); //在标题栏中显示加载

    this.getUserInfo(); //模拟加载

    setTimeout(function () {
      // complete
      uni.hideNavigationBarLoading(); //完成停止加载

      uni.stopPullDownRefresh(); //停止下拉刷新
    }, 1500);
  },
  methods: {
    getUserInfo() {
      let that = this;
	  if(that. userInfo){
		util.request(api.MyInfo).then(function (res) {
		  if (res.errno == 0) {
		    console.log(res.data);
		    that.setData({
		      collectNum: res.data.collectNum,
		      footNum: res.data.footNum,
		      couponNum: res.data.couponNum
		    });
		  }
		});  
	  }
    },

    onUserInfoClick: function () {
		//#ifndef MP-WEIXIN
		return ;
		//#endif
		
      if (!util.isLogin()) {
		  // console.log("log")
        this.showLoginDialogFun();
      }
    },

    showLoginDialogFun() {
      this.showLoginDialog = true
	  // console.log("show"+this.showLoginDialog)
    },

    onLigonSuccess: function (args) {
      console.log("==onLigonSuccess==" + JSON.stringify(args));
      this.setData({
        userInfo: uni.getStorageSync('userInfo')
      });
	  this.getUserInfo()
    },

    onDialogBody() {// 阻止冒泡
    },

    onOrderInfoClick: function (event) {
      uni.navigateTo({
        url: '/pages/ucenter/order/order'
      });
    },
    onSectionItemClick: function (event) {},
    // TODO 移到个人信息页面
    exitLogin: function () {
      uni.showModal({
        title: '',
        confirmColor: '#b4282d',
        content: '退出登录？',
        success: function (res) {
          if (res.confirm) {
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }
      });
    }
  }
};
</script>
<style>
page{
    height: 100%;
    width: 100%;
}
.container{
    height: auto;
    overflow: hidden;
    width: 100%;
    background-color: #f4f4f4;
}
.profile {
  position: relative;
  width: 750rpx;
  /* height: 480rpx; */
  height: 330rpx;
  background-color: #ffffff;
}
.profile-img{
  width: 100%;
  position: absolute;
  /* height: 426rpx; */
  height: 307rpx;
}
.vip-img{
  width: 690rpx;
  height: 140rpx;
  position: absolute;
  margin: 312rpx 0rpx 0rpx 30rpx;
  border-radius: 18rpx;
}
.profile-content {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}
.profile-info {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0 30rpx;
  /* background: #333; */
  margin-top: 30rpx;
  
}
.profile-info .avatar {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  /* border: 4rpx solid #fff; */
}

.profile-info .info {
  flex: 1;
  height: 85rpx;
  margin-left: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-info .name {
  height: 45rpx;
  line-height: 45rpx;
  color: #fff;
  font-size: 37.5rpx;
}

.profile-info .level {
  height: 30rpx;
  line-height: 30rpx;
  margin-top: 10rpx;
  color: #7f7f7f;
  font-size: 30rpx;
}

.profile-info .btn {
  width: 20rpx;
  height: 40rpx;
  margin-left: 10rpx;
  border-radius: 50%;
}

.profile-bottom {
  display: flex;
  flex-direction: row;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 50rpx;
}

.profile-bottom .item {
  flex: 1;
}
.profile-bottom .top-text {
  font-size: 36rpx;

  display: block;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 12rpx;
}
.profile-bottom .bottom-text {
  font-size: 24rpx;

  display: block;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 12rpx;
}

.order {
  display: flex;
  flex-direction: column;
  padding: 0rpx 30rpx 40rpx 30rpx;
  background-color: #ffffff;
}
.order .title {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order .title .l{
  color: #353535;
  font-size: 30rpx;
  float: left;
  flex: 1;
}
.order .title .r{
  color: #888888;
  font-size: 24rpx;
}
.jiantou{
  width: 10rpx;
  height: 25rpx;
  margin-left: 10rpx;
}
.order .menu{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}
.order .menu .item{
  flex: 1;
}
.order .menu image {
  display: block;
  width: 55rpx;
  height: 48rpx;
  margin: 0 auto;
  margin-bottom: 12rpx;
}
.order .menu text {
  display: block;
  font-size: 24rpx;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  color: #333;
  margin-top: 12rpx;
}

.user-menu{
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin-top: 20rpx;
}

.user-menu .item{
    width: 720rpx;
    height: 100rpx;
    border-bottom: 1px solid #e5e4e5;
    margin-left: 30rpx;
}

.user-menu .item .a{
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  align-items: center;
}

.user-menu .item.no-border {
    border-right: 0;
}

.user-menu .item.item-bottom {
    border-bottom: none;
}

.user-menu .icon{
    height: 40rpx;
    width: 40rpx;
}

/* .user-menu .icon.order{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -437.5rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.coupon{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -62.4997rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.gift{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -187.5rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.address{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 0 no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.security{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -500rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.kefu{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -312.5rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.help{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -250rpx no-repeat;
    background-size: 52.803rpx;
}

.user-menu .icon.feedback{
    background: url("http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png") 0 -125rpx no-repeat;
    background-size: 52.803rpx;
} */

.user-menu .txt{
    width: 100%;
    font-size: 26rpx;
    columns: #353535;
    margin-left: 20rpx;
}
.user-menu .jiantou{
  width: 15rpx;
  height: 27rpx;
  margin-right: 30rpx;
}

.bottom-img {
  width: 100%;
  height: 240rpx;
  margin-top: 20rpx;
}

.logout{
    margin-top: 20rpx;
    height: 101rpx;
    width: 100%;
    line-height: 101rpx;
    text-align: center;
    background: #fff;
    color: #333;
    font-size: 30rpx;
}


.dialog-login{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5); 
  display: flex;
  justify-content: center;
  align-items: center;
}


.dialog-login .dialog-body{
  width: 540rpx;
  height: auto;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  padding: 40rpx;
}

.dialog-login .dialog-body .title{
  width: 100%;
  text-align: center;
  line-height: 60rpx;
}

.dialog-login .dialog-body .content{
  width: 100%;
}

.dialog-login .dialog-body button{
  margin-top: 30rpx;
}
</style>